<template>
  <div class="home-nav-bar">
    <van-tabs v-model:active="active" class="van-tabs" @change="changeTab">
      <van-tab title="关注" name="0" class="van-tab"></van-tab>
      <van-tab
        v-for="item in navList"
        :title="item.name"
        :name="item._id"
        :key="item._id"
        class="van-tab"
      ></van-tab>
    </van-tabs>
    <div>
      <van-icon name="apps-o" class="panel-icon" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
// import { defineProps } from "vue";
defineProps({
  navList: Array
});

const active = ref(0);
const changeTab = (name) => {
  console.log(name);
};
</script>

<style scoped lang="less">
.home-nav-bar {
  background-color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  position: relative;
  .van-tabs {
    width: 90%;
  }
  .panel-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
